<template>
	<div class="" v-show="value">
		<div class="mask" :style="zIndex?{zIndex:zIndex+1}:{}"></div>
		<div class="modal-out" :style="zIndex?{zIndex:zIndex+2}:{}">
			<div class="modal-header" v-show="title">{{title}}</div>
			<div class="modal-content" :style="nopadding?{padding:0}:{}">
				<slot></slot>
			</div>
			<div class="modal-bottom dis-flex ft-32 t-c">
				<div class="flex-1 modal-cancel" v-show="type==1" @click="close">{{cancelBtn}}</div>
				<div class="flex-1 modal-ok" @click="ok">{{okBtn}}</div>
			</div>
		</div>
	</div>
</template>
<script>
	function noop() {}
	export default{
		props:{
			nopadding:{
				type:Boolean,
				default:false
			},
			zIndex:{
				type:String,
				default:""
			},
			value:{
				type:Boolean,
				default:false
			},
			cancelBtn:{
				type:String,
				default:"取消"
			},
			okBtn:{
				type:String,
				default:"确定"
			},
			type:{
				type:String,
				default:"1"
			},
			"title":String,
		},
		watch: {
			value(value){
				this.$emit('input', value);
			}
		},
		methods:{
			close(){
				this.$emit('input', false);
				//if (typeof this.closeCall=="function") {
					this.$emit('closeCall');
				//}
			},
			ok(){
				//if(typeof this.ok=='function'){
					this.$emit('okCall');
				//}
			}
		}
	}
</script>
<style lang="scss">
	@import '@/css/base.scss';
	.mask{
		position: fixed;
    	z-index: 1000;
    	top: 0;
    	right: 0;
    	left: 0;
    	bottom: 0;
    	background: rgba(0, 0, 0, 0.6);
    }

    .modal-out{position: fixed;top:380px;width: 630px;left:60px;border-radius: 16px;background: #FFF;z-index: 1001;}

    .modal-header{height: 120px;line-height: 120px;text-align: center;border: 1px solid #E9E9E9;border-top-left-radius: 16px;border-top-right-radius: 16px;}
    .modal-content{padding: 40px 60px;}
    .modal-bottom{height: 120px;line-height: 120px;border-top: 1px solid #E9E9E9;}
    .modal-cancel{border-right: 1px solid #E9E9E9;}
    .modal-ok{color: $red}
</style>